<template>
  <div>
    <el-dialog
      title="选择教室"
      width="1200px"
      custom-class="select-class-dialog"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
    >
      <ul class="search-bar">
        <li>
            <label>校区：</label>
            <ht-select
                    v-model="search.xqid"
                    :options="campusOptions"
                    filterable
                    placeholder="请选择"
            ></ht-select>
        </li>
        <li>
          <label>教室名称：</label>
          <ht-input
            v-model="search.jsmc"
            placeholder="请输入教室名称"
          ></ht-input>
        </li>
        <!-- <li>
          <label>教室类型：</label>
          <ht-input
            v-model="search.jslx"
            placeholder="请输入教室类型"
          ></ht-input>
        </li> -->
        <li>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </li>
      </ul>
      <el-table
        ref="htTable"
        :data="tableData"
        border
        height="450"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="55"></el-table-column>
        <el-table-column label="教室名称" prop="jsmc" align="center">
        </el-table-column>
        <el-table-column
          prop="xqmc"
          label="校区名称"
          align="center"
        ></el-table-column>
        <el-table-column prop="zws" label="座位数" align="center">
        </el-table-column>
        <el-table-column
          prop="jslx"
          label="教室类型"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ getClassRoomName(scope.row.jslx) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        background
        :current-page.sync="pageResult.page"
        :page-size="pageResult.pageSize"
        layout="prev, pager, next,sizes"
        :total="pageResult.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <div slot="footer">
        <el-button @click="confirm" type="primary">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import course from '@/api/course.js'

export default {
  props: {
    editId: String,
    classRoomOptions: Array
  },
  data() {
    return {
      selectedList: [],
      search: {
        xqmc: '',
        jsmc: ''
      },
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      tableData: [],
      campusOptions:[],
    }
  },
  created() {
      this.getCampusOptions()
  },
  methods: {
    getCampusOptions() {
        course.getDicListByKeys('xqdic').then(res => {
            this.campusOptions = res.value.xqdic
        })
    },
    getClassRoomName(key) {
      if (!this.classRoomOptions) {
        return key
      }
      if (!key) {
        return ''
      }
      let obj = this.classRoomOptions.find(k=>{
        return k.key == key
      })
      return obj ? obj.value : key
    },
    handleSearch() {
      this.pageResult.page = 1
      this.getTableData()
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    getTableData() {
      let params = {
        isRecord: false,
        pageBean: this.pageResult,
        querys: [],
        recordId: this.editId
      }
      if (this.search.xqmc) {
        params.querys.push({
          property: 'xqmc',
          value: this.search.xqmc,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.search.xqid) {
          params.querys.push({
              property: 'xqid',
              value: this.search.xqid,
              group: 'main',
              operation: 'EQUAL',
              relation: 'AND'
          })
      }
      if (this.search.jsmc) {
        params.querys.push({
          property: 'jsmc',
          value: this.search.jsmc,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      if (this.search.jslx) {
        params.querys.push({
          property: 'jslx',
          value: this.search.jslx,
          group: 'main',
          operation: 'LIKE',
          relation: 'AND'
        })
      }
      course.getClassRoomList(params).then(res => {
        this.tableData = res.rows
        this.pageResult.total = res.total
      })
    },
    confirm() {
      if (!this.selectedList.length) {
        this.$message.info('请至少选择一条数据！')
        return
      }
      let arr = this.selectedList.map(k => {
        return {
          pkjlid: this.editId,
          cslx: 'classroom',
          csdxid: k.jsid
        }
      })
      course.saveClassRoomList(arr).then(res => {
        if (res.state) {
          this.$message.success('保存成功!')
          this.$emit('confirm')
          this.dialogVisible = false
        } else {
          this.$message.error(res.message || '接口异常！')
        }
      })
    },
    showDialog() {
      this.selectedList = []
      this.getTableData()
      this.dialogVisible = true
    },
    handleSizeChange(val) {
      //   每页条数
      this.pageResult.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      //   当前页
      this.pageResult.page = val
      this.getTableData()
    }
  }
}
</script>
<style lang="scss" scoped>
.select-class-dialog {
  .search-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      margin-bottom: 16px;
      margin-right: 16px;
    }
  }
  .custom-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
